<template>
    <div class="sea-page-row small-page">
        <font-request :provider="queryDept" class="page-left flex-box box-primary" style="min-width: 360px;">
            <template #default="{response, reload, loading}">
                <div class="flex-header">
                    <h5>部门列表</h5>
                    <small>点击下方列表，即可修改配置</small>
                    <sea-tips>
                        <p>分组决定了用户的上下级关系；</p>
                        <p>业务中，通常决定了数据的查询范围。</p>
                        <p>部门是特殊的用户组，决定了用户的上下级关系；</p>
                    </sea-tips>
                    <a @click="reload" class="pull-right"><i class="fa fa-refresh"></i> 刷新</a>
                </div>

                <div class="flex-body">
                    <el-skeleton :data="response" :loading="loading">
                        <sea-editable-tree :options="response"
                                           :click="onModify" :modify="onModify"
                                           :create="onCreate" :remove="onRemove">
                        </sea-editable-tree>
                    </el-skeleton>
                </div>
                <!-- /.box -->
            </template>
        </font-request>

        <div class="page-body flex-box box-info">
            <div class="flex-header">
                <h5>编辑权限</h5>
                <small>点击右侧权限开始编辑</small>
            </div>

            <div class="flex-body">
                <sea-form style="max-width: 30vw;" :model="form_data" :rules="form_rules" :submit=" dept.modify"
                          :succeed="onSucceed">
                    <template #default="{form_data}">
                        <el-form-item label="角色" prop="roleId">
                            <sea-select v-model="form_data.roleId" placeholder="角色"
                                        :provider="queryRoles"></sea-select>
                        </el-form-item>
                        <el-form-item label="部门名称" prop="deptName">
                            <el-input v-model="form_data.deptName" placeholder="部门名称"></el-input>
                        </el-form-item>
                        <el-form-item label="部门编码" prop="deptCode">
                            <el-input v-model="form_data.deptCode" placeholder="部门编码"></el-input>
                        </el-form-item>
                        <el-form-item label="图标" prop="icon">
                            <el-input v-model="form_data.icon" placeholder="图标"></el-input>
                        </el-form-item>
                        <el-form-item label="描述" prop="description">
                            <el-input v-model="form_data.description" placeholder="描述"></el-input>
                        </el-form-item>
                        <el-form-item label="是否可编辑" prop="editable">
                            <el-switch v-model="form_data.editable" placeholder="是否可编辑"></el-switch>
                        </el-form-item>
                        <el-form-item label="是否禁用" prop="disabled">
                            <el-switch v-model="form_data.disabled" placeholder="是否禁用"></el-switch>
                        </el-form-item>
                    </template>
                </sea-form>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">

import Bamboo from "@/lang/bamboo";
import {reactive, ref} from "vue";
import dept from "./dept.js";
import role from "@/view/core/auth/role/role.js";
import Dictionary from "@/lang/dict/dictionary";
import SeaSelect from "@/widget/form-item/sea-select.vue";
import FontRequest from "@/widget/request/font-request.vue";
import menu from "@/view/core/init/menu/menu";

const form_rules = reactive(dept.formRules);

const form_data = ref(dept.formModel());

// 角色数据字典查询
const queryRoles = () => role.list({}).then(list => Dictionary.from(list, 'roleName', 'id'));

// 查询机构列表
const queryDept = () => dept.list({}).then(list => {
    if (Layers.isNotEmpty(list)) {
        form_data.value = list[0];
    }
    const ret = Bamboo.toTree(list, dept.deptTreeMapper);
    console.log(ret)
    return ret;
})

/**
 * 新增节点
 * @param node 节点
 * @param data 数据
 * @returns {Promise<*>}
 */
const onCreate = (data, node) => {
    return dept.create(data.id).then(ret => Bamboo.wrapObject(ret, dept.deptTreeMapper)).catch(err => console.error(err))
}
/**
 * 移除节点
 * @param node 节点
 * @param data 数据
 * @returns {Promise<*>}
 */
const onRemove = (data, node) => {
    return dept.remove(data.id);
}
/**
 * 更新
 * @param node 节点
 * @param data 数据
 * @returns {Promise<*>}
 */
let row_data: TreeNode = undefined;
const onModify = (data, node) => {
    row_data = data;
    form_data.value = data.data;
}


/**
 * 新增/编辑操作成功
 *
 * @param ret 后台响应数据
 * @param data 表单数据
 */
const onSucceed = (ret, data) => {
    Object.assign(row_data, Bamboo.wrapObject(form_data.value, dept.deptTreeMapper))
}

</script>

